<!--
* @author wn
* @date 2022/06/22 14:29:37
* @description: 商品详情页面 -- 商品评价组件
!-->
<template>
	<div class="goods-comment">
		<!-- 头部 -->
		<div v-if="commentInfo" class="head">
			<!-- 购买与好评 -->
			<div class="data">
				<p>
					<span>
						{{ commentInfo.salesCount }}
					</span>
					<span>人购买</span>
				</p>
				<p>
					<span>{{ commentInfo.praisePercent }}</span>
					<span>好评率</span>
				</p>
			</div>
			<!-- 标签 -->
			<div class="tags">
				<div class="dt">大家都在说:</div>
				<div class="dd">
					<a
						href="javascript:;"
						v-for="(item, index) in commentInfo.tags"
						:key="item.title"
						@click="changeTag(item, index)"
						:class="{ active: index === activeIndex }"
					>
						{{ item.title }}({{ item.tagCount }})
					</a>
				</div>
			</div>
		</div>
		<!-- 排序 点击改变数据 与样式-->
		<div class="sort" v-if="commentList">
			<span>排序:</span>
			<a
				href="javascript:;"
				@click="changeField(null)"
				:class="{ active: sortField === null }"
			>
				默认
			</a>
			<a
				href="javascript:;"
				@click="changeField('createTime')"
				:class="{ active: sortField === 'createTime' }"
			>
				最新
			</a>
			<a
				href="javascript:;"
				@click="changeField('praiseCount')"
				:class="{ active: sortField === 'praiseCount' }"
			>
				最热
			</a>
		</div>
		<!-- 评论列表 -->
		<div class="list" v-if="commentList">
			<div v-for="item in commentList" :key="item.id" class="item">
				<div class="user">
					<img :src="item.member.avatar" alt="" />
					<span>{{ formatName(item.member.nickname) }}</span>
				</div>
				<div class="body">
					<div class="score">
						<i
							v-for="i in item.score"
							:key="i + 's'"
							class="iconfont icon-wjx01"
						></i>
						<i
							v-for="i in 5 - item.score"
							:key="i + 'k'"
							class="iconfont icon-wjx02"
						></i>
						<span class="attr"> {{ formatSpecs(item.orderInfo.specs) }} </span>
					</div>
					<div class="text">{{ item.content }}</div>
					<!-- 图片展示 [] 为 true -->
					<goods-comment-image
						v-if="item.pictures.length"
						:pictures="item.pictures"
					/>
					<div class="time">
						<span>{{ item.createTime }}</span>
						<span class="zan">
							<i class="iconfont icon-dianzan"></i>
							{{ item.praiseCount }}
						</span>
					</div>
				</div>
			</div>
		</div>
		<!-- 下一页 分页组件 列表出来后在显示-->
		<xtx-pagination
			v-if="commentList"
			@current-change="currentChange"
			:currPage="page"
			:total="total"
			:pageSize="pageSize"
		/>
	</div>
	<br />
</template>
<script>
import { ref, reactive, inject, watch, toRef } from 'vue'
import { findGoodsCommentInfo, findGoodsCommentList } from '@/network/product'
import GoodsCommentImage from './GoodsCommentImage'
export default {
	name: 'GoodsComment',
	components: { GoodsCommentImage },
	setup() {
		// 评论信息
		const commentInfo = ref(null)
		// 选中当前索引
		const activeIndex = ref(0)
		// 获取 当前路由 商品Id
		const goodId = inject('good').value.id
		// 商品的评价信息
		findGoodsCommentInfo(goodId).then(({ result }) => {
			// 向返回的数组前  追加自定义 两个数据 对象
			result.tags.unshift({ title: '有图', tagCount: result.hasPictureCount })
			result.tags.unshift({ title: '全部评价', tagCount: result.evaluateCount })
			commentInfo.value = result
		})
		// 选中  button 样式  与 筛选条件的 定义
		const changeTag = (tag, index) => {
			// 高亮效果
			activeIndex.value = index

			//  1 全部评价  2 有图  3 有 tag
			if (tag.title === '全部评价') {
				query.tag = null
				query.hasPicture = null
			} else if (tag.title === '有图') {
				query.hasPicture = true
				query.tag = null
			} else {
				query.tag = tag.title
				query.hasPicture = null
			}
			// 点击触发重新查询  将 page重置为 1  以及排序点击
			query.page = 1
		}
		// 点击排序 事件
		const changeField = field => {
			query.sortField = field
			query.page = 1
		}
		// 定义 评论列表接口 筛选条件
		const query = reactive({
			page: 1, // 是 1 页码
			pageSize: 10, // 是 10 页尺寸
			hasPicture: null, // 否 true 是否有图
			tag: null, // 否 质量好 标签
			sortField: null, // 否 praiseCount 排序字段，可选值范围[praiseCount,createTime]
			sortMethod: null, // 否 desc 排序方法，可选值范围[asc,desc],默认为desc
		})
		// 监视 query 的变化  默认的 立马执行一次  获取评论列表的API
		const commentList = ref(null)
		// 总页码
		const total = ref(0)
		watch(
			query,
			async () => {
				const { result } = await findGoodsCommentList(goodId, query)
				commentList.value = result.items
				total.value = result.counts
			},
			{ immediate: true }
		)
		// 接收参数 计算新的值 更改  commentList--orderInfo.specs  匿名
		const formatSpecs = specs =>
			specs.reduce((p, c) => `${p} ${c.name}: ${c.nameValue}`, '').trim()

		const formatName = name => `${name.substr(0, 1)}****${name.substr(-1)}`
		// 切换页码
		const currentChange = newPage => (query.page = newPage)
		return {
			commentInfo,
			activeIndex,
			commentList,
			sortField: toRef(query, 'sortField'),
			page: toRef(query, 'page'),
			pageSize: toRef(query, 'pageSize'),
			total,
			changeTag,
			changeField,
			formatSpecs,
			formatName,
			currentChange,
		}
	},
}
</script>
<style scoped lang="less">
.goods-comment {
	.head {
		display: flex;
		padding: 30px 0;
		.data {
			display: flex;
			width: 340px;
			padding: 20px;
			border-right: 1px solid #f5f5f5;
			p {
				display: flex;
				flex-direction: column;
				flex: 1;
				text-align: center;
				color: #999;
				span:first-child {
					font-size: 32px;
					color: @priceColor;
				}
			}
		}
		.tags {
			display: flex;
			flex: 1;
			.dt {
				width: 100px;
				text-align: right;
				line-height: 42px;
				font-weight: 700;
			}
			.dd {
				display: flex;
				flex-wrap: wrap;
				flex: 1;
				a {
					width: 132px;
					height: 42px;
					margin: 0 0 20px 20px;
					border-radius: 4px;
					border: 1px solid #e4e4e4;
					background: #f5f5f5;
					color: #999;
					text-align: center;
					line-height: 40px;
					&:hover {
						border-color: @xtxColor;
						background: lighten(@xtxColor, 50%);
						color: @xtxColor;
					}
					&.active {
						border-color: @xtxColor;
						background: @xtxColor;
						color: #fff;
					}
				}
			}
		}
	}
	.sort {
		height: 60px;
		line-height: 60px;
		border-top: 1px solid #f5f5f5;
		border-bottom: 1px solid #f5f5f5;
		margin: 0 20px;
		color: #666;
		> span {
			margin-left: 20px;
		}
		> a {
			margin-left: 30px;
			&.active,
			&:hover {
				color: @xtxColor;
			}
		}
	}
	.list {
		padding: 0 20px;
		.item {
			display: flex;
			padding: 25px 10px;
			border-bottom: 1px solid #f5f5f5;
			.user {
				width: 160px;
				img {
					width: 40px;
					height: 40px;
					border-radius: 50%;
					overflow: hidden;
				}
				span {
					padding-left: 10px;
					color: #666;
				}
			}
			.body {
				flex: 1;
				.score {
					line-height: 40px;
					.iconfont {
						color: #ff9240;
						padding-right: 3px;
					}
					.attr {
						padding-left: 10px;
						color: #666;
					}
				}
				.text {
					color: #666;
					line-height: 24px;
				}
				.time {
					display: flex;
					justify-content: space-between;
					color: #999;
					margin-top: 5px;
				}
			}
		}
	}
}
</style>
